<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增长度单位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      margin:100px auto;
      background-color: skyblue;
      /*两个值的含义：水平方向   垂直方向 */
      /* box-shadow: 10px 10px; */

      /*三个值的含义：水平方向   垂直方向   颜色*/
      /* box-shadow: 10px 10px blue; */


      /*三个值的含义：水平方向   垂直方向  阴影的模糊程度  */
      /* box-shadow: 10px 10px 10px; */

      /*四个值的含义：水平方向   垂直方向  阴影的模糊程度  阴影颜色*/
      /* box-shadow: 10px 10px 10px blue; */

      /*五个值的含义：水平方向   垂直方向  阴影的模糊程度  外延值 阴影颜色*/
      /* box-shadow: 10px 10px 10px 10px blue; */

      /*六个值的含义：水平方向   垂直方向  阴影的模糊程度  外延值 阴影颜色 内阴影*/
      /* box-shadow: 10px 10px 10px 10px blue inset; */
      position: relative;
      top: 0px;
      left: 0px;
      transition: 0.4s linear all;
    
    }
    .box1:hover{
      box-shadow: 0px 0px 20px black;
      top: -5px;
      left: 0px;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  
</body>
</html>